<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>技术总结 |   👉Aresnine 👈</title>
    <meta name="description" content="Aresnine的个人博客,web,vue,组件库,js">
    <link rel="preload stylesheet" href="/assets/style.427ea497.css" as="style">
    <link rel="modulepreload" href="/assets/app.db42a1fc.js">
    <link rel="modulepreload" href="/assets/技术总结_index.md.3f8dbe79.lean.js">
    
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-236bb526><!--[--><!--]--><!--[--><span tabindex="-1" data-v-14c16caa></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-14c16caa> Skip to content </a><!--]--><!----><header class="VPNav" data-v-236bb526 data-v-de4e1621><div class="VPNavBar" data-v-de4e1621 data-v-52cf45e4><div class="container" data-v-52cf45e4><div class="title" data-v-52cf45e4><div class="VPNavBarTitle" data-v-52cf45e4 data-v-a8248850><a class="title" href="/" data-v-a8248850><!--[--><!--]--><!----><!--[-->  👉Aresnine 👈<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-52cf45e4><div class="curtain" data-v-52cf45e4></div><div class="content-body" data-v-52cf45e4><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-52cf45e4 data-v-97cd7ece><span id="main-nav-aria-label" class="visually-hidden" data-v-97cd7ece>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/面试题/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->面试题<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vitepress/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->vitePress<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/www/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->网站搭建<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue3/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->vue🐴<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/每日任务/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->每日任务<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/技术总结/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->技术总结<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-97cd7ece data-v-6d0cfa0d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6d0cfa0d><span class="text" data-v-6d0cfa0d><!----> technology <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6d0cfa0d><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-6d0cfa0d><div class="VPMenu" data-v-6d0cfa0d data-v-24d333ba><div class="items" data-v-24d333ba><!--[--><!--[--><div class="VPMenuLink" data-v-24d333ba data-v-78f06588><a class="VPLink link" href="/technology/待整理/" data-v-78f06588 data-v-a6710068><!--[-->待整理<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-24d333ba data-v-78f06588><a class="VPLink link" href="/technology/typescript/" data-v-78f06588 data-v-a6710068><!--[-->typescript<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-24d333ba data-v-78f06588><a class="VPLink link" href="/technology/blog/" data-v-78f06588 data-v-a6710068><!--[-->博客搭建<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-24d333ba data-v-78f06588><a class="VPLink link" href="/technology/vantcli/" data-v-78f06588 data-v-a6710068><!--[-->vantcli文档<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/components/index.html" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->组件库<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-52cf45e4 data-v-3c0f7ebf><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-3c0f7ebf data-v-1811cbb7 data-v-51cfdd54><span class="check" data-v-51cfdd54><span class="icon" data-v-51cfdd54><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1811cbb7><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-1811cbb7><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-52cf45e4 data-v-eaa5cb3f data-v-6d0cfa0d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6d0cfa0d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6d0cfa0d><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6d0cfa0d><div class="VPMenu" data-v-6d0cfa0d data-v-24d333ba><!----><!--[--><!--[--><!----><div class="group" data-v-eaa5cb3f><div class="item appearance" data-v-eaa5cb3f><p class="label" data-v-eaa5cb3f>Appearance</p><div class="appearance-action" data-v-eaa5cb3f><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-eaa5cb3f data-v-1811cbb7 data-v-51cfdd54><span class="check" data-v-51cfdd54><span class="icon" data-v-51cfdd54><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1811cbb7><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-1811cbb7><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-52cf45e4 data-v-f4211e0b><span class="container" data-v-f4211e0b><span class="top" data-v-f4211e0b></span><span class="middle" data-v-f4211e0b></span><span class="bottom" data-v-f4211e0b></span></span></button></div></div></div></div><!----></header><!----><!----><div class="VPContent" id="VPContent" data-v-236bb526 data-v-bb109c21><div class="VPDoc has-aside" data-v-bb109c21 data-v-9710e0b3><div class="container" data-v-9710e0b3><div class="aside" data-v-9710e0b3><div class="aside-curtain" data-v-9710e0b3></div><div class="aside-container" data-v-9710e0b3><div class="aside-content" data-v-9710e0b3><div class="VPDocAside" data-v-9710e0b3 data-v-b312be0a><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-b312be0a data-v-69920f5a><div class="content" data-v-69920f5a><div class="outline-marker" data-v-69920f5a></div><div class="outline-title" data-v-69920f5a>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-69920f5a><span class="visually-hidden" id="doc-outline-aria-label" data-v-69920f5a> Table of Contents for current page </span><ul class="root" data-v-69920f5a data-v-5343b0c6><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-b312be0a></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-9710e0b3><div class="content-container" data-v-9710e0b3><!--[--><!--]--><main class="main" data-v-9710e0b3><div style="position:relative;" class="vp-doc _%E6%8A%80%E6%9C%AF%E6%80%BB%E7%BB%93_index" data-v-9710e0b3><div><h1 id="技术总结" tabindex="-1">技术总结 <a class="header-anchor" href="#技术总结" aria-hidden="true">#</a></h1><h2 id="_1、微信环境下-网页不受微信字体影响" tabindex="-1">1、微信环境下，网页不受微信字体影响 <a class="header-anchor" href="#_1、微信环境下-网页不受微信字体影响" aria-hidden="true">#</a></h2><blockquote><p>安卓:</p></blockquote><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 强制禁止用户修改微信客户端的字体大小</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;">       (function() </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">           </span><span style="color:#82AAFF;">if</span><span style="color:#BABED8;"> (</span><span style="color:#89DDFF;">typeof</span><span style="color:#BABED8;"> WeixinJSBridge </span><span style="color:#89DDFF;">==</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">object</span><span style="color:#89DDFF;">&quot;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">typeof</span><span style="color:#BABED8;"> WeixinJSBridge</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">invoke </span><span style="color:#89DDFF;">==</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">function</span><span style="color:#89DDFF;">&quot;</span><span style="color:#BABED8;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">               </span><span style="color:#F07178;">handleFontSize</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;">;</span></span>
<span class="line"><span style="color:#BABED8;">           </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> else </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">               </span><span style="color:#F07178;">if</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;">document.addEventListener</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                   </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">WeixinJSBridgeReady</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">handleFontSize</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">               </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> else </span><span style="color:#F07178;">if</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;">document.attachEvent</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                   </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attachEvent</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">WeixinJSBridgeReady</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">handleFontSize</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">                   </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attachEvent</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">onWeixinJSBridgeReady</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">handleFontSize</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#BABED8;">           </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#BABED8;">           </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">handleFontSize</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">               </span><span style="color:#676E95;font-style:italic;">// 设置网页字体为默认大小</span></span>
<span class="line"><span style="color:#F07178;">               </span><span style="color:#BABED8;">WeixinJSBridge</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">invoke</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">setFontSizeCallback</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">fontSize</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">               </span><span style="color:#676E95;font-style:italic;">// 重写设置网页字体大小的事件</span></span>
<span class="line"><span style="color:#F07178;">               </span><span style="color:#BABED8;">WeixinJSBridge</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">menu:setfont</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                   </span><span style="color:#BABED8;">WeixinJSBridge</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">invoke</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">setFontSizeCallback</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">fontSize</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">               </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">           </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#BABED8;">       </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)();</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><blockquote><p>苹果：</p></blockquote><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">/* iOS禁止微信调整字体大小 */</span></span>
<span class="line"><span style="color:#FFCB6B;">body</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#FFCB6B;">-webkit-text-size-adjust</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">!important</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#B2CCD6;">text-size-adjust</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">!important</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#FFCB6B;">-moz-text-size-adjust</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">!important</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h2 id="_2、git报prc或者网络如error-prc-failed" tabindex="-1">2、git报PRC或者网络如error:PRC failed <a class="header-anchor" href="#_2、git报prc或者网络如error-prc-failed" aria-hidden="true">#</a></h2><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">1.  使用&quot;git config --list&quot;查看&quot;http.postBuffer&quot;参数的目前值，如果没有设置，默认值是1兆，确认目前值确实较小。 </span></span>
<span class="line"><span style="color:#babed8;">2.  使用&quot;git config --global http.postBuffer &lt;xxx&gt;&quot;其中xxx单位为Byte，比如设置524288000（512MB） </span></span>
<span class="line"><span style="color:#babed8;">3.  重新运行git远程命令，命令可以成功 </span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h2 id="_3、全球低代码平台" tabindex="-1">3、全球低代码平台 <a class="header-anchor" href="#_3、全球低代码平台" aria-hidden="true">#</a></h2><p>低代码是一种通过简化应用程序的创建、维护和更新过程来提高开发效率的开发模式。它可以让非技术人员或小规模开发团队快速构建应用程序，降低开发成本和时间。</p><p>现在在业界内，低代码的方案有很多，比如以下几个：</p><ol><li>Microsoft Power Platform</li></ol><p>Power Platform是由微软推出的一套低代码开发平台，包括Power Apps、Power BI和Power Automate。Power Apps可以让用户使用低代码来快速构建自定义的业务应用，Power BI可以帮助用户从各种数据源中汇总和分析数据，并将其可视化呈现，Power Automate支持自动化业务流程以提高生产效率。</p><ol start="2"><li>Google App Maker</li></ol><p>App Maker是由谷歌提供的一套简单易用的低代码开发平台，用户可以通过拖放绑定数据等方式，构建自定义的业务应用程序。App Maker提供了很多预定义的应用程序模板和组件，包括报告、表单、工作流等。</p><ol start="3"><li>Mendix</li></ol><p>Mendix是一款强大的低代码开发平台，用户可以使用Mendix提供的图形化开发工具来自定义应用程序，并使用Mendix提供的一系列功能和组件，如数据集成、安全性、扩展性、可维护性等，来简化应用程序开发和维护流程。</p><ol start="4"><li>OutSystems</li></ol><p>OutSystems是一家葡萄牙的低代码开发平台提供商，他们提供了一套完整的低代码开发平台，用户可以从OutSystems平台中获取集成、安全、用户体验、测试和部署等方面的支持，排除开发中的各种麻烦，提高开发效率。</p><ol start="5"><li>Appian</li></ol><p>Appian是一款简单易用的低代码开发平台，用户可以简单地构建自定义的业务应用程序，包括报告、表单、工作流等，并使用Appian的一系列功能和组件来简化开发过程。Appian还支持跨多个设备和平台部署。</p><p>总的来说，低代码方案使应用程序开发变得更加容易和快捷，因为用户无需编写大量的代码，也不需要具备高深的编程技能。低代码方案通过提供基础架构、组件和集成支持等，使得应用程序开发过程更加轻松和高效。</p><h2 id="_4、json反射生成vue文件" tabindex="-1">4、JSON反射生成vue文件 <a class="header-anchor" href="#_4、json反射生成vue文件" aria-hidden="true">#</a></h2><p>通过json数据生成vue文件是一个比较复杂的过程，需要进行大量的数据处理和模板操作。以下是一些大致的思路和操作流程。</p><ol><li><p>解析json数据，分析数据结构和内容，并提取所需信息，如组件名称、数据、方法等。</p></li><li><p>根据提取的信息，生成vue组件的模板代码。可以使用类似ejs、handlebars等模板引擎，或者直接使用字符串拼接，将生成的代码转化为字符串形式。</p></li><li><p>使用文件系统API（如fs等），创建文件并将vue组件的模板代码写入到文件中。</p></li><li><p>如果需要，可以使用脚本或其他工具，将Vue组件中使用的依赖包进行自动引入，或者执行其他一些自动化操作。</p></li></ol><p>以下给出简单的代码示例，来演示如何基于json数据，生成vue组件的过程：</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> fs </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">fs</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> ejs </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ejs</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 读取json文件并解析</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> data </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> fs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">readFileSync</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./data.json</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">utf8</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> jsonData </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">parse</span><span style="color:#BABED8;">(data)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 解析数据，获取所需信息</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> componentName </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> jsonData</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> dataStr </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#BABED8;">(jsonData</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">data</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">null,</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">2</span><span style="color:#BABED8;">)</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> methods </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> jsonData</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">methods </span><span style="color:#89DDFF;">||</span><span style="color:#BABED8;"> []</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 生成vue组件的模板代码</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> template </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> ejs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">`</span></span>
<span class="line"><span style="color:#C3E88D;">&lt;template&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">  &lt;div&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">    &lt;!-- TODO: Add component content here --&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">  &lt;/div&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">&lt;/template&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">&lt;script&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">export default {</span></span>
<span class="line"><span style="color:#C3E88D;">  name: &#39;&lt;%= componentName %&gt;&#39;,</span></span>
<span class="line"><span style="color:#C3E88D;">  data() {</span></span>
<span class="line"><span style="color:#C3E88D;">    return &lt;%= dataStr %&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">  },</span></span>
<span class="line"><span style="color:#C3E88D;">  methods: {</span></span>
<span class="line"><span style="color:#C3E88D;">    &lt;% methods.forEach(method =&gt; { %&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">    &lt;%= method %&gt;() {</span></span>
<span class="line"><span style="color:#C3E88D;">      // TODO: Add method implementation here</span></span>
<span class="line"><span style="color:#C3E88D;">    },</span></span>
<span class="line"><span style="color:#C3E88D;">    &lt;% }); %&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">  }</span></span>
<span class="line"><span style="color:#C3E88D;">}</span></span>
<span class="line"><span style="color:#C3E88D;">&lt;/script&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">&lt;style scoped&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">/* TODO: Add component styles here */</span></span>
<span class="line"><span style="color:#C3E88D;">&lt;/style&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">`</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;">componentName</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> dataStr</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> methods</span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 创建vue文件并写入模板代码</span></span>
<span class="line"><span style="color:#BABED8;">fs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">writeFile</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">${</span><span style="color:#BABED8;">componentName</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">.vue</span><span style="color:#89DDFF;">`</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> template</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">err</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">err</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">throw</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">err</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">File &#39;</span><span style="color:#89DDFF;">${</span><span style="color:#BABED8;">componentName</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">.vue&#39; created successfully!</span><span style="color:#89DDFF;">`</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span></code></pre></div><p>需要注意的是，此示例只是基于json数据简单生成了一个最基础的Vue单文件组件代码。在实际应用中，还需要进行更多的处理和判断，以确保生成的代码符合Vue的基本要求和最佳实践，能够正常运行和使用。</p><h2 id="_5、全屏展示功能" tabindex="-1">5、全屏展示功能 <a class="header-anchor" href="#_5、全屏展示功能" aria-hidden="true">#</a></h2><p>1、安装插件</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">pnpm add screenfull --save</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>2、在vue文件中使用</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width: 100%;height: 100%;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">float: right;height: 100%;position: relative;display: flex;align-items: center;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">success</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">screenfullClick</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;">{{ isFullscreen ? &#39;退出全屏&#39; : &#39;全屏展示&#39; }}</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-button</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;"> </span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">//  按需引入 screenfull</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> screenfull </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">screenfull</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">ref</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">onMounted</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">onUnmounted</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#BABED8;"> </span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> isFullscreen </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#BABED8;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#BABED8;">)</span></span>
<span class="line"><span style="color:#BABED8;"> </span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#82AAFF;">onMounted</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#BABED8;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">resize</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">currentScreen</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"><span style="color:#BABED8;"> </span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#82AAFF;">onUnmounted</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#BABED8;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">removeEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">resize</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">currentScreen</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"><span style="color:#BABED8;"> </span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 浏览器改变触发</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> currentScreen </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">screenfull</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">isFullscreen</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!==</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">isFullscreen</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span><span style="color:#F07178;">) </span><span style="color:#BABED8;">isFullscreen</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">screenfull</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">isFullscreen</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">//  点击切换全屏</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> screenfullClick </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">screenfull</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">isEnabled</span><span style="color:#F07178;">) </span><span style="color:#BABED8;">screenfull</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toggle</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">scoped</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">top-right</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#B2CCD6;">float</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> right</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> relative</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><h2 id="_6、sass在vite中的使用" tabindex="-1">6、sass在vite中的使用 <a class="header-anchor" href="#_6、sass在vite中的使用" aria-hidden="true">#</a></h2><p>1、安装，vite现在只需要安装就可以，已经内置解析支持</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">pnpm add -D sass</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h2 id="_7、elementplus的自动引入" tabindex="-1">7、elementPlus的自动引入 <a class="header-anchor" href="#_7、elementplus的自动引入" aria-hidden="true">#</a></h2><p>1、安装elementPlus</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">pnpm i element-plus</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>2、安装自动导入插件</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">pnpm install -D unplugin-vue-components unplugin-auto-import</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>3、vite配置</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> AutoImport </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">unplugin-auto-import/vite</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> Components </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">unplugin-vue-components/vite</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">ElementPlusResolver</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">unplugin-vue-components/resolvers</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">defineConfig</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// ...</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// ...</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#82AAFF;">AutoImport</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#F07178;">resolvers</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#82AAFF;">ElementPlusResolver</span><span style="color:#BABED8;">()]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#82AAFF;">Components</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#F07178;">resolvers</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#82AAFF;">ElementPlusResolver</span><span style="color:#BABED8;">()]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span></code></pre></div><h2 id="_8、v-model" tabindex="-1">8、v-model <a class="header-anchor" href="#_8、v-model" aria-hidden="true">#</a></h2><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">1、父组件 v-model:name=&quot;变量&quot;</span></span>
<span class="line"><span style="color:#babed8;">2、子组件</span></span>
<span class="line"><span style="color:#babed8;">	a、接收属性： const props = defineProps[&#39;name&#39;]</span></span>
<span class="line"><span style="color:#babed8;">	b、接收事件： const emit = defineEmits([&#39;update:name&#39;])</span></span>
<span class="line"><span style="color:#babed8;">3、子组件修改</span></span>
<span class="line"><span style="color:#babed8;">	emit(&#39;update:name&#39;,值)</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h2 id="_9、pnpm-忽略-lock文件" tabindex="-1">9、pnpm 忽略 lock文件 <a class="header-anchor" href="#_9、pnpm-忽略-lock文件" aria-hidden="true">#</a></h2><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">install</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">--no-frozen-lockfile</span></span>
<span class="line"></span></code></pre></div><h2 id="_10、ts中常用event事件类型" tabindex="-1">10、ts中常用Event事件类型 <a class="header-anchor" href="#_10、ts中常用event事件类型" aria-hidden="true">#</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#BABED8;">ClipboardEvent</span><span style="color:#89DDFF;">&lt;</span><span style="color:#BABED8;">T </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> Element</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;"> 剪贴板事件对象</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">DragEvent</span><span style="color:#89DDFF;">&lt;</span><span style="color:#BABED8;">T </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> Element</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;"> 拖拽事件对象</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">ChangeEvent</span><span style="color:#89DDFF;">&lt;</span><span style="color:#BABED8;">T </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> Element</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;"> Change 事件对象</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">KeyboardEvent</span><span style="color:#89DDFF;">&lt;</span><span style="color:#BABED8;">T </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> Element</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;"> 键盘事件对象</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">MouseEvent</span><span style="color:#89DDFF;">&lt;</span><span style="color:#BABED8;">T </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> Element</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;"> 鼠标事件对象</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">TouchEvent</span><span style="color:#89DDFF;">&lt;</span><span style="color:#BABED8;">T </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> Element</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;"> 触摸事件对象</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">WheelEvent</span><span style="color:#89DDFF;">&lt;</span><span style="color:#BABED8;">T </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> Element</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;"> 滚轮事件对象</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">AnimationEvent</span><span style="color:#89DDFF;">&lt;</span><span style="color:#BABED8;">T </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> Element</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;"> 动画事件对象</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">TransitionEvent</span><span style="color:#89DDFF;">&lt;</span><span style="color:#BABED8;">T </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> Element</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;"> 过渡事件对象</span></span>
<span class="line"></span></code></pre></div><h2 id="_11、namespaced-true" tabindex="-1">11、namespaced:true <a class="header-anchor" href="#_11、namespaced-true" aria-hidden="true">#</a></h2><p>这个是为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，之后在不同页面中引入getter、actions、mutations时，需要加上所属的模块名</p><h2 id="_12、pinia两种写法" tabindex="-1">12、pinia两种写法 <a class="header-anchor" href="#_12、pinia两种写法" aria-hidden="true">#</a></h2><p>optionStore和setupStore两种写法</p><p>function相当于actions、computed相当于getter、ref相当于state</p><blockquote><p>optionStore</p></blockquote><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> useCounterStore </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">defineStore</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">counter</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#82AAFF;">state</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> (</span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">0</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">getters</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#82AAFF;">double</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> state</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">count </span><span style="color:#89DDFF;">*</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">actions</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">increment</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">this.</span><span style="color:#BABED8;">count</span><span style="color:#89DDFF;">++</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span></code></pre></div><blockquote><p>setupStore</p></blockquote><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> useCounterStore </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">defineStore</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">counter</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">count</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">0</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">increment</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#BABED8;">count</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span><span style="color:#89DDFF;">++</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">count</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">increment</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div><h2 id="_13、lodash的使用" tabindex="-1">13、lodash的使用 <a class="header-anchor" href="#_13、lodash的使用" aria-hidden="true">#</a></h2><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">pnpm i lodash-es -S</span></span>
<span class="line"><span style="color:#babed8;">pnpm i -D @types/lodash</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h2 id="其他待整理" tabindex="-1">其他待整理 <a class="header-anchor" href="#其他待整理" aria-hidden="true">#</a></h2><p>1、工具函数导出：<a href="https://zhuanlan.zhihu.com/p/443175985" target="_blank" rel="noreferrer">https://zhuanlan.zhihu.com/p/443175985</a></p><p>2、<a href="https://zhuanlan.zhihu.com/p/443175985" target="_blank" rel="noreferrer">https://zhuanlan.zhihu.com/p/443175985</a></p><p>3、ref、torefs、reative</p><p><a href="https://juejin.cn/post/7013326406444646407" target="_blank" rel="noreferrer">https://juejin.cn/post/7013326406444646407</a></p><p>4、jsonschema</p><p><a href="https://juejin.cn/post/7209698674905350205" target="_blank" rel="noreferrer">https://juejin.cn/post/7209698674905350205</a></p><p><a href="https://juejin.cn/post/6844903829947826189" target="_blank" rel="noreferrer">https://juejin.cn/post/6844903829947826189</a></p><p><a href="https://juejin.cn/post/7205773311606554679" target="_blank" rel="noreferrer">https://juejin.cn/post/7205773311606554679</a></p><p><a href="https://juejin.cn/post/6844903576729305096" target="_blank" rel="noreferrer">https://juejin.cn/post/6844903576729305096</a></p><p><a href="https://juejin.cn/post/7071174879778242568" target="_blank" rel="noreferrer">https://juejin.cn/post/7071174879778242568</a></p><p>5、ts中引入库的正确姿势</p><p><a href="https://juejin.cn/post/7052528116345864228" target="_blank" rel="noreferrer">https://juejin.cn/post/7052528116345864228</a></p><p><a href="https://cloud.tencent.com/developer/article/2039066" target="_blank" rel="noreferrer">https://cloud.tencent.com/developer/article/2039066</a></p><p><a href="https://juejin.cn/post/7211437215336333372" target="_blank" rel="noreferrer">https://juejin.cn/post/7211437215336333372</a></p><p><a href="https://juejin.cn/post/7081628820188430344" target="_blank" rel="noreferrer">https://juejin.cn/post/7081628820188430344</a></p><p><a href="https://blog.battlefy.com/tree-shaking-lodash-with-vite" target="_blank" rel="noreferrer">https://blog.battlefy.com/tree-shaking-lodash-with-vite</a></p><p>6、chatgpt</p><p><a href="https://blog.csdn.net/JakeMa1024/article/details/129030002" target="_blank" rel="noreferrer">https://blog.csdn.net/JakeMa1024/article/details/129030002</a></p><p><a href="https://zhuanlan.zhihu.com/p/612351471" target="_blank" rel="noreferrer">https://zhuanlan.zhihu.com/p/612351471</a></p><p>7、</p><ul><li>v-text 支持<code>?:;</code>但是不支持<code>??</code></li><li><a href="http://note.q123q.cn/my/work_2021hy/2nodelib/typeorm-date.html" target="_blank" rel="noreferrer">http://note.q123q.cn/my/work_2021hy/2nodelib/typeorm-date.html</a></li><li><a href="https://xugaoyi.com/" target="_blank" rel="noreferrer">https://xugaoyi.com/</a></li></ul><p>8、</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/*</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * axios封装</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * 接口请求统一处理，返回Promise对象</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * 可根据项目需要，进一步封装添加拦截器等</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> axios</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">AxiosInstance</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">AxiosRequestConfig</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">AxiosResponse</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">axios</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 定义接口返回数据类型</span></span>
<span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">ResponseData</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">code</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">message</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 创建axios实例</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> request</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">AxiosInstance</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> axios</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">create</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 接口统一的请求路径前缀</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">baseURL</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">VUE_APP_BASE_API</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 允许跨域请求携带cookies等凭证</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">withCredentials</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 设置请求超时时间</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">timeout</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">10000</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 请求拦截器</span></span>
<span class="line"><span style="color:#BABED8;">request</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">interceptors</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">request</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">config</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">AxiosRequestConfig</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// const token = localStorage.getItem(&#39;token&#39;)</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// if (token) {</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">//   config.headers.Authorization = token</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// }</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">config</span></span>
<span class="line"><span style="color:#89DDFF;">},</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">error</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reject</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">error</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 响应拦截器</span></span>
<span class="line"><span style="color:#BABED8;">request</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">interceptors</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">response</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#BABED8;">(</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">response</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">AxiosResponse</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 根据实际返回自定义统一处理</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">response</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">data</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">ResponseData</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">code</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!==</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">200</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">message</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reject</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Error</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">message</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">))</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">data</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">error</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">err</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">error</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reject</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">error</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#BABED8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> request</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 使用方法</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> request </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/utils/request</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// GET请求，url参数传递</span></span>
<span class="line"><span style="color:#BABED8;">request</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/user?ID=12345</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#BABED8;">(</span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">res</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// GET请求，params参数传递</span></span>
<span class="line"><span style="color:#BABED8;">request</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/user</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">params</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">ID</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">12345</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#BABED8;">(</span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">res</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// POST请求，data参数传递</span></span>
<span class="line"><span style="color:#BABED8;">request</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">post</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/user</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">firstName</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Fred</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">lastName</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Flintstone</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#BABED8;">(</span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">res</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// PUT请求</span></span>
<span class="line"><span style="color:#BABED8;">request</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">put</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/user</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">firstName</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Barney</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">lastName</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Rubble</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#BABED8;">(</span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">res</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// DELETE请求</span></span>
<span class="line"><span style="color:#BABED8;">request</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">delete</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/user</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">params</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">ID</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">12345</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#BABED8;">(</span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">res</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span>
<span class="line"></span></code></pre></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"></span>
<span class="line"><span style="color:#BABED8;">Vue 3引入了一整套新的API，用于替换Vue 2中的选项和mixins，包括了一些新的Hooks API，可用于处理逻辑和数据的复用。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F78C6C;">1.</span><span style="color:#BABED8;"> useState</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">作用：在组件中声明响应式状态。</span></span>
<span class="line"><span style="color:#FFCB6B;">语法</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">[</span><span style="color:#BABED8;">state</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> setState</span><span style="color:#89DDFF;">]</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">useState</span><span style="color:#BABED8;">(initialState)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">示例：</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">​</span><span style="color:#89DDFF;">```</span><span style="color:#C3E88D;">javascript</span></span>
<span class="line"><span style="color:#C3E88D;">import { defineComponent, onMounted, useState } from &#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">export default defineComponent({</span></span>
<span class="line"><span style="color:#C3E88D;">  setup() {</span></span>
<span class="line"><span style="color:#C3E88D;">    const [count, setCount] = useState(0)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">    const increment = () =&gt; {</span></span>
<span class="line"><span style="color:#C3E88D;">      setCount(count.value + 1)</span></span>
<span class="line"><span style="color:#C3E88D;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">    onMounted(() =&gt; {</span></span>
<span class="line"><span style="color:#C3E88D;">      console.log(&#39;Mounted&#39;)</span></span>
<span class="line"><span style="color:#C3E88D;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">    return {</span></span>
<span class="line"><span style="color:#C3E88D;">      count,</span></span>
<span class="line"><span style="color:#C3E88D;">      increment</span></span>
<span class="line"><span style="color:#C3E88D;">    }</span></span>
<span class="line"><span style="color:#C3E88D;">  }</span></span>
<span class="line"><span style="color:#C3E88D;">})</span></span>
<span class="line"><span style="color:#89DDFF;">```</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F78C6C;">2.</span><span style="color:#BABED8;"> useEffect</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">作用：在组件生命周期的特定时间调用副作用，比如API请求、订阅等。</span></span>
<span class="line"><span style="color:#FFCB6B;">语法</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">useEffect</span><span style="color:#BABED8;">(callback: </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">void,</span><span style="color:#BABED8;"> deps</span><span style="color:#89DDFF;">?:</span><span style="color:#BABED8;"> any[])</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">示例：</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">```</span><span style="color:#C3E88D;">javascript</span></span>
<span class="line"><span style="color:#C3E88D;">import { defineComponent, onMounted, useState, useEffect } from &#39;vue&#39;</span></span>
<span class="line"><span style="color:#C3E88D;">import axios from &#39;axios&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">export default defineComponent({</span></span>
<span class="line"><span style="color:#C3E88D;">  setup() {</span></span>
<span class="line"><span style="color:#C3E88D;">    const [users, setUsers] = useState([])</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">    useEffect(() =&gt; {</span></span>
<span class="line"><span style="color:#C3E88D;">      axios.get(&#39;https://jsonplaceholder.typicode.com/users&#39;).then(res =&gt; {</span></span>
<span class="line"><span style="color:#C3E88D;">        setUsers(res.data)</span></span>
<span class="line"><span style="color:#C3E88D;">      })</span></span>
<span class="line"><span style="color:#C3E88D;">    }, [])</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">    return {</span></span>
<span class="line"><span style="color:#C3E88D;">      users</span></span>
<span class="line"><span style="color:#C3E88D;">    }</span></span>
<span class="line"><span style="color:#C3E88D;">  }</span></span>
<span class="line"><span style="color:#C3E88D;">})</span></span>
<span class="line"><span style="color:#89DDFF;">```</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F78C6C;">3.</span><span style="color:#BABED8;"> useRef</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">作用：在组件之间共享可变值。</span></span>
<span class="line"><span style="color:#FFCB6B;">语法</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> refContainer </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">useRef</span><span style="color:#BABED8;">(initialValue)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">示例：</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">```</span><span style="color:#C3E88D;">javascript</span></span>
<span class="line"><span style="color:#C3E88D;">import { defineComponent, onMounted, useRef } from &#39;vue&#39;</span></span>
<span class="line"><span style="color:#C3E88D;">import Child from &#39;./Child.vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">export default defineComponent({</span></span>
<span class="line"><span style="color:#C3E88D;">  setup() {</span></span>
<span class="line"><span style="color:#C3E88D;">    const nameInput = useRef(&#39;&#39;)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">    const handleFocus = () =&gt; {</span></span>
<span class="line"><span style="color:#C3E88D;">      nameInput.value.focus()</span></span>
<span class="line"><span style="color:#C3E88D;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">    return {</span></span>
<span class="line"><span style="color:#C3E88D;">      nameInput,</span></span>
<span class="line"><span style="color:#C3E88D;">      handleFocus</span></span>
<span class="line"><span style="color:#C3E88D;">    }</span></span>
<span class="line"><span style="color:#C3E88D;">  },</span></span>
<span class="line"><span style="color:#C3E88D;">  components: {</span></span>
<span class="line"><span style="color:#C3E88D;">    Child</span></span>
<span class="line"><span style="color:#C3E88D;">  }</span></span>
<span class="line"><span style="color:#C3E88D;">})</span></span>
<span class="line"><span style="color:#89DDFF;">```</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">```</span><span style="color:#C3E88D;">vue</span></span>
<span class="line"><span style="color:#C3E88D;">&lt;template&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">  &lt;div&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">    &lt;input type=&quot;text&quot; ref=&quot;nameInput&quot; /&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">    &lt;button @click=&quot;handleFocus&quot;&gt;Focus&lt;/button&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">    &lt;Child ref=&quot;child&quot; /&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">  &lt;/div&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">&lt;/template&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">```</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F78C6C;">4.</span><span style="color:#BABED8;"> useContext</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">作用：在组件树中获取全局状态或方法。</span></span>
<span class="line"><span style="color:#FFCB6B;">语法</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> contextValue </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">useContext</span><span style="color:#BABED8;">(context)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">示例：</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">```</span><span style="color:#C3E88D;">javascript</span></span>
<span class="line"><span style="color:#C3E88D;">import { createContext, defineComponent, useContext } from &#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">const UserContext = createContext()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">const Parent = defineComponent({</span></span>
<span class="line"><span style="color:#C3E88D;">  setup() {</span></span>
<span class="line"><span style="color:#C3E88D;">    return {</span></span>
<span class="line"><span style="color:#C3E88D;">      user: {</span></span>
<span class="line"><span style="color:#C3E88D;">        name: &#39;Tom&#39;,</span></span>
<span class="line"><span style="color:#C3E88D;">        age: 18</span></span>
<span class="line"><span style="color:#C3E88D;">      }</span></span>
<span class="line"><span style="color:#C3E88D;">    }</span></span>
<span class="line"><span style="color:#C3E88D;">  },</span></span>
<span class="line"><span style="color:#C3E88D;">  provide() {</span></span>
<span class="line"><span style="color:#C3E88D;">    return {</span></span>
<span class="line"><span style="color:#C3E88D;">      user: this.user</span></span>
<span class="line"><span style="color:#C3E88D;">    }</span></span>
<span class="line"><span style="color:#C3E88D;">  },</span></span>
<span class="line"><span style="color:#C3E88D;">  components: {</span></span>
<span class="line"><span style="color:#C3E88D;">    Child</span></span>
<span class="line"><span style="color:#C3E88D;">  }</span></span>
<span class="line"><span style="color:#C3E88D;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">const Child = defineComponent({</span></span>
<span class="line"><span style="color:#C3E88D;">  setup() {</span></span>
<span class="line"><span style="color:#C3E88D;">    const user = useContext(UserContext)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">    return {</span></span>
<span class="line"><span style="color:#C3E88D;">      user</span></span>
<span class="line"><span style="color:#C3E88D;">    }</span></span>
<span class="line"><span style="color:#C3E88D;">  }</span></span>
<span class="line"><span style="color:#C3E88D;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">export default defineComponent({</span></span>
<span class="line"><span style="color:#C3E88D;">  setup() {</span></span>
<span class="line"><span style="color:#C3E88D;">    return {</span></span>
<span class="line"><span style="color:#C3E88D;">      UserContext</span></span>
<span class="line"><span style="color:#C3E88D;">    }</span></span>
<span class="line"><span style="color:#C3E88D;">  },</span></span>
<span class="line"><span style="color:#C3E88D;">  components: {</span></span>
<span class="line"><span style="color:#C3E88D;">    Parent</span></span>
<span class="line"><span style="color:#C3E88D;">  }</span></span>
<span class="line"><span style="color:#C3E88D;">})</span></span>
<span class="line"><span style="color:#89DDFF;">```</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">```</span><span style="color:#C3E88D;">vue</span></span>
<span class="line"><span style="color:#C3E88D;">&lt;template&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">  &lt;UserContext.Provider :value=&quot;user&quot;&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">    &lt;Parent /&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">  &lt;/UserContext.Provider&gt;</span></span>
<span class="line"><span style="color:#C3E88D;">&lt;/template&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">```</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F78C6C;">5.</span><span style="color:#BABED8;"> useWatch</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">作用：监听变量或prop的变化。</span></span>
<span class="line"><span style="color:#FFCB6B;">语法</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">useWatch</span><span style="color:#BABED8;">(source: Ref </span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> any </span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;"> (</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> any)[]</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> cb: </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">newVal</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">oldVal</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">void,</span><span style="color:#BABED8;"> options</span><span style="color:#89DDFF;">?:</span><span style="color:#BABED8;"> WatchOptions)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">示例：</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">```</span><span style="color:#C3E88D;">javascript</span></span>
<span class="line"><span style="color:#C3E88D;">import { defineComponent, useWatch } from &#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">export default defineComponent({</span></span>
<span class="line"><span style="color:#C3E88D;">  props: {</span></span>
<span class="line"><span style="color:#C3E88D;">    name: String</span></span>
<span class="line"><span style="color:#C3E88D;">  },</span></span>
<span class="line"><span style="color:#C3E88D;">  setup(props) {</span></span>
<span class="line"><span style="color:#C3E88D;">    useWatch(() =&gt; props.name, (newVal, oldVal) =&gt; {</span></span>
<span class="line"><span style="color:#C3E88D;">      console.log(&#39;Name changed:&#39;, newVal, oldVal)</span></span>
<span class="line"><span style="color:#C3E88D;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">    return {</span></span>
<span class="line"><span style="color:#C3E88D;">      props</span></span>
<span class="line"><span style="color:#C3E88D;">    }</span></span>
<span class="line"><span style="color:#C3E88D;">  }</span></span>
<span class="line"><span style="color:#C3E88D;">})</span></span>
<span class="line"><span style="color:#89DDFF;">```</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span></code></pre></div></div></div></main><!--[--><!--]--><!----><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"components_button_index.md\":\"aa43389d\",\"面试题_js_index.md\":\"d9022b75\",\"technology_待整理_index.md\":\"cd182cba\",\"introduce.md\":\"151f998f\",\"technology_blog_index.md\":\"b9d66824\",\"technology_typescript_index.md\":\"b32f8f74\",\"www_index.md\":\"ee942a14\",\"面试题_index.md\":\"69aa1706\",\"面试题_html_index.md\":\"01fab77b\",\"技术总结_unocss.md\":\"185c54f2\",\"每日任务_index.md\":\"8d6f93c4\",\"components_index.md\":\"c76bb41d\",\"面试题_vue_index.md\":\"172437ce\",\"面试题_待整理_index.md\":\"b7b5073a\",\"index.md\":\"2bfd6ad8\",\"技术总结_index.md\":\"3f8dbe79\",\"technology_vantcli_index.md\":\"e26eafd5\",\"vue3_index.md\":\"bfa452eb\",\"vitepress_index.md\":\"8e83926c\"}")</script>
    <script type="module" async src="/assets/app.db42a1fc.js"></script>
    
  </body>
</html>